<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { useFs } from '@fast-crud/fast-crud';
import { Col, Row } from 'ant-design-vue';

import { getValidateRulesByFs } from '#/api/common/validateByFs';
import { DefDictConfig } from '#/api/devOperation/system/defDict';
import { ActionEnum } from '#/enums/commonEnum';

import { createCrudOptions, frontRules } from './data/crud';
import EnumTable from './enums/index.vue';
import ItemTable from './item/index.vue';

defineOptions({
  name: '字典管理',
  inheritAttrs: false,
});

const itemTableRef = ref();
const enumTableRef = ref();
const { crudRef, crudBinding, crudExpose, appendCrudOptions } = useFs({
  createCrudOptions,
  context: { itemTableRef, enumTableRef },
});

// 页面打开后获取列表数据
onMounted(async () => {
  const addFormOptions = await getValidateRulesByFs({
    Api: DefDictConfig.Save,
    mode: ActionEnum.ADD,
    customRules: frontRules.addForm.rules(),
    trigger: 'change',
  });
  const editFormOptions = await getValidateRulesByFs({
    Api: DefDictConfig.Update,
    mode: ActionEnum.EDIT,
    customRules: frontRules.editForm.rules(crudExpose),
    trigger: 'change',
  });
  appendCrudOptions({ ...addFormOptions, ...editFormOptions });
  crudExpose.doRefresh();
});
</script>

<template>
  <Row class="demo-nest" :gutter="0">
    <Col :span="8">
      <EnumTable
        ref="enumTableRef"
        @success="() => crudRef.value.doRefresh()"
      />
      <FsCrud ref="crudRef" v-bind="crudBinding" />
    </Col>
    <Col :span="16">
      <ItemTable ref="itemTableRef" />
    </Col>
  </Row>
</template>

<style lang="scss">
.demo-nest {
  width: 100%;
  height: 100%;
}
</style>
